<template>
    <div class="bg">
        <div class="logn-in">
            <div class="sign-message">
                <h1>欢迎登录</h1>
                <h3>母婴销售系统后台管理平台</h3>
            </div>
            <div class="sign-form">
                <el-form>
                    <el-input style="margin-bottom: 20px; margin-left:30px;  width: 400px;" v-model="formData.account"  placeholder="请输入账号"></el-input>
                    <br>
                    <span v-show="errCode == 1">账号为纯数字组成</span>
                    <el-input style="margin-bottom: 20px; margin-left:30px;  width: 400px;" type="password" v-model="formData.password"  placeholder="请输入密码"></el-input>
                    <br>
                    <span v-show="errCode == 2">请输入密码</span><br>
                    <el-button style="margin: 0 30px;" type="primary" @click="sign">登录</el-button>
                    <ul>
                        <li>本系统普通后台管理账户为超级管理员账户创建！</li>
                        <li><a href="javascript: void(0)" @click="registerSuper">注册成为超级管理员</a></li>
                    </ul>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "Merchantlogin",
        data() {
            return {
                formData: {
                    account: '',
                    password: '',
                },
                errCode: null
            }
        },

        methods: {
            registerSuper() {
                this.$router.push({path: '/business/register'})
            },
            sign() {
                let isNum = /^[1-9]*[1-9][1-9]$/
                if (!isNum.test(this.formData.account)) {
                    this.errCode = 1
                }else if (this.formData.password.length == 0) {
                    this.errCode = 2
                }else {
                    sendwithpost({
                        url: '/businessSignIn',
                        data: this.formData
                    }).then(res=> {
                        this.$message({
                            showClose: true,
                            type: res.data.type,
                            message: res.data.message
                        })
                        if (res.data.res_code == 2) {
                            this.$store.state.businessUser = res.data.businessUser
                            this.$router.push({path: '/business'})
                            if (this.$store.state.businessUser.jurisdiction.includes('客服')) {
                                this.$socket.emit('businessLogn', this.$store.state.businessUser._id)
                            }
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .bg {
        height: 100vh;
        background-image: url('../../../assets/img/common/businessbg.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
   .logn-in {
       width: 1100px;
       margin: 0 auto;
       display: flex;
       height: 70vh;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
   }
    .logn-in > * {
        flex: 1;
        padding-top: 200px;
    }
    .sign-message {
        background-color: #7165DC;
        color: #ffffff;
    }
    .sign-message h1 {
        font-weight: bold;
    }
    .sign-form {
        background-color: #fff;
    }
    .sign-form > *, .sign-message > * {
        margin: 40px;
    }
    .sign-form ul {
        list-style: none;
        line-height: 2em;
        font-size: 14px;
    }
    .sign-form span {
        color: red;
        font-size: 12px;
        margin-left: 30px;
    }
</style>